import { defineComponent, reactive, watch } from "vue";
import { ElButton } from "element-plus";

import useCopy from "@/hook/useCopy";
import { debounce } from "@/utils";

import Blocklayout from "@/components/layout/Blocklayout.vue";
import MonacoDditor from "@/components/Document/MonacoDditor/MonacoDditor.vue";
import CommonMenu from "@/components/CommonMenu.vue";

import type { StateType } from "./type";
import { quicktypeJSON } from "./util";
import menuConfig from "./menuConfig";
import { message } from "@/utils/Element";
import EXAMPLE_JSON from "./example.json";
import cssModule from "./index.module.scss";

/**
 * if (input > 2n ** 32n || input < -(2n ** 32n)) {
 *
 * node_modules\.pnpm\quicktype-core@23.0.76\node_modules\readable-stream\lib\ours\errors.js
 * node_modules\.pnpm\node_modules\readable-stream\lib\ours\errors.js
 * node_modules\.pnpm\registry.npmmirror.com+readable-stream@4.4.2\node_modules\readable-stream\lib\ours\errors.js
 *
 * if (input > 2 ** 32 || input < -(2 ** 32)) {
 */

export default defineComponent({
  setup() {
    const state = reactive<StateType>({
      json: JSON.stringify(EXAMPLE_JSON, null, 2),
      genType: "",
      quicktypeOpt: {
        lang: "typescript",
        typeName: "ExampleType",
        indentation: "\t",
        inferEnums: true,
        inferUuids: false,
        inferMaps: true,
        combineClasses: true,
        inferDateTimes: false,
        allPropertiesOptional: false,
        alphabetizeProperties: true,
        "just-types": true,
        "prefer-types": true,
        "nice-property-names": false,
        "prefer-unions": true,
        "prefer-const-values": false,
        "acronym-style": "original"
      }
    });

    /** 生产类型 */
    const generateType = debounce(async () => {
      if (state.json) {
        try {
          console.log("state.quicktypeOpt: ", state.quicktypeOpt);
          const { lines: tsPerson } = await quicktypeJSON({
            jsonString: state.json,

            // 两个配置都在一个对象里面
            ...state.quicktypeOpt,
            rendererOptions: state.quicktypeOpt
          });
          state.genType = tsPerson.join("\n");
        } catch (err) {
          console.log("err: ", err);
          message.error("转换失败了: " + err);
        }
      }
    }, 300);

    watch(() => [state.json, state.quicktypeOpt], generateType, { immediate: true, deep: true });

    /** 插槽内容 */
    const slotContents = {
      left: () => <MonacoDditor v-model={state.json} language="json" />,
      menu: () => (
        <div>
          <CommonMenu menuConfig={menuConfig} v-model={state.quicktypeOpt} />
          <div class={cssModule["btn-item"]}>
            <ElButton type="primary" size="small" disabled={!state.json} onClick={() => useCopy(state.genType)}>
              复制
              <i class="iconfont icon-fuzhi" />
            </ElButton>
          </div>
        </div>
      ),
      right: () => <MonacoDditor v-model={state.genType} language={state.quicktypeOpt.lang} />
    };

    return () => (
      <div class={cssModule.container}>
        <Blocklayout rightStyle={{ padding: "4px" }} v-slots={slotContents} />
      </div>
    );
  }
});
